<script setup lang="ts">
	import { ref } from 'vue'
	import {
		cancelSignUp,
		isPlayProducts,
	} from '@/api/training'

	import { getOrderLIst, orderRefund } from '@/api/match'

	import { onShow } from '@dcloudio/uni-app'
	import { SIGN_ENUM_MATCH, SIGN_ENUM_TEXT } from '@/utils/basicData'
	import { msg, showModal, wechatPayment } from '@/utils/tools'
	import { payOrder } from '@/api/team'
	const dataList = ref([{}])
	const paging = ref()
	const tabIndex = ref(0)
	const typeItem = ref(null)
	const tabList = ref([
		{ name: '全部', type: null },
		{ name: '待付款', type: 1 },
		{ name: '已支付', type: 4 },
		{ name: '支付失败', type: 3 },
		{ name: '已退款', type: 2 },
	])

	onShow(() => {
		reload()
	})
	const loadFun = (pageNum : number, pageSize : number) => {
		// if(tabIndex.value == 0){// 个人订单
		getOrderLIst({
			pageNum, pageSize,
			status: typeItem.value,
			openid: uni.getStorageSync('openId'),
		}).then(res => {
			if (res.code == 200) {
				paging.value.complete(res.data.list)
			} else {
				paging.value.complete(false)
			}
		}).catch(err => {
			paging.value.complete(false)
		})
		// }
		// if(tabIndex.value == 1){ // 团队订单
		//   teamOrderList({pageNo,pageSize,type:typeItem.value}).then(res => {
		//     if(res.code == 200){
		//       paging.value.complete(res.data.data)
		//     }else{
		//       paging.value.complete(false)
		//     }
		//   }).catch(err => {
		//     paging.value.complete(false)
		//   })
		// }
	}
	const tabClick = (data : any) => {
		typeItem.value = data.type
		paging.value.reload()
	}
	const reload = () => {
		paging.value && paging.value.reload()
	}
	const cancelEnum = (registrationOrderStatusEnum : any) => {
		return [0, 2, 3, 8].indexOf(registrationOrderStatusEnum) > -1
	}
	const playEnum = (data : number) => {
		return [-2, 2, 3, 8].indexOf(data) > -1
	}
	const navigatorClick = (url : string) => {
		uni.navigateTo({ url })
	}
	// 修改信息
	const modifyingInformation = (data : any) => {
		const params = {
			eventsId: data.eventsId,
			campId: data.campId,
			orderId: data.id,
		}
		navigatorClick(`/pageSignUp/personalSignUp/personalSignUp?params=${encodeURIComponent(JSON.stringify(params))}`)
	}
	const orderClick = (data : any) => {
		navigatorClick(`/pageSignUp/matchOrder/matchOrder?id=${data?.order?.reportId}`)
	}
	// 退款
	const refund = (data : any) => {
		orderRefund({
			orderNo: data?.order?.orderNo,
			amount: data?.order?.orderAmount,
			refundRemark: '退款'
		}).then(res => {
			if (res.code == 200) {
				msg('申请退款成功')
				paging.value.reload()
			} else {

			}
		}).catch(err => {
		})

	}
	const pay = (data) => {
		// 起调支付
		payOrder(data?.order?.orderNo).then(res => {
			if (res.code == 200) {
				// 起调支付
				wechatPayment(res.data.payJSON).then((_res : any) => {
					// 支付后检查是否支付
					msg('支付成功')
					paging.value.refresh()
				}).catch((err : any) => {
					msg('支付失败，请重试', false)
				})
			}
		})
	}
	const cancelClick = (data : any) => {
		showModal({
			content: '您确定要取消报名吗？',
			success: (res) => {
				if (res.confirm) {
					cancelSignUp({ id: data.id }).then(res => {
						msg('取消成功')
						paging.value.reload()
					})
				}
			}
		})
	}

	const productsPlay = (id : number) => {
		isPlayProducts({ registrationId: id }).then(res => {
			if (res.data) {
				uni.navigateTo({ url: `/pageSignUp/productsOrder/productsOrder?id=${id}` })
			} else {
				uni.navigateTo({ url: `/pageSignUp/additionalProducts/additionalProducts?id=${id}` })
			}
		})
	}
	const insuranceEdit = (data : any) => {
		uni.navigateTo({ url: `/pageSignUp/insuranceEdit/insuranceEdit?id=${data.id}` })
	}

	defineExpose({ reload })
	const translateStatus = (status) => {
		switch (status) {
			case "REMOVED":
				return "已移除";
			case "UNDER_REVIEW":
				return "审核中";
			case "APPROVED_BY_REVIEW":
				return "审核通过";
			case "REVIEW_FAILED":
				return "审核未通过";
			default:
				return "未知类型";
		}
	}
</script>

<template>
	<z-paging ref="paging" class="z-paging" v-model="dataList" @query="loadFun">
		<template #top>
			<xx-title title="赛事订单" />
			<view style="background: #FFFFFF">
				<up-tabs :list="tabList" @click="tabClick" lineColor="#90C762"
					:activeStyle="{color:'#90C762',fontWeight:'500'}" :inactiveStyle="{color:'#212223'}"
					:scrollable="false"></up-tabs>
			</view>
		</template>
		<block v-for="(item,index) in dataList" :key="index">
			<view class="order-personal" @click="orderClick(item)">
				<view class="order-time">
					<view class="order-left">
						报名时间：{{item.createTime}}
					</view>
					<view class="order-right">
						{{SIGN_ENUM_MATCH[item?.order?.orderStatus]}}/{{translateStatus(item?.examineState)}}
					</view>
				</view>
				<view class="order-body">
					<view class="order-body-left">
						<view class="order-name">{{item.eventName}}</view>
					</view>
					<view class="order-body-right">
						<view class="order-number">¥{{item?.order?.orderRealAmount}}</view>
					</view>
				</view>
				<view class="order-btn">
					<view class="btn" @click.stop="orderClick(item)">查看详情</view>
					<view class="btn success" v-if="item?.order?.orderStatus == 1||item?.order?.orderStatus==3"
						@click.stop="pay(item)">继续支付</view>
				</view>
			</view>
		</block>
	</z-paging>
</template>

<style scoped lang="scss">
	::v-deep.z-paging-content {
		background-color: #F5F5F5;
	}

	.tab {
		display: flex;
		justify-items: center;
		align-items: center;
		background-color: #FFFFFF;
		height: 80rpx;
		width: 100%;

		.tab-item {
			width: 50%;
			text-align: center;
			height: 100%;

			&.active {
				color: #92C75B;
				position: relative;

				&:before {
					content: '';
					position: absolute;
					display: block;
					bottom: 0;
					height: 8rpx;
					width: 100rpx;
					background-color: #92C75B;
					border-radius: 10rpx;
					left: calc((100% - 100rpx) / 2);
				}
			}
		}
	}

	.order-item {
		margin: 24rpx 28rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background-color: #FFFFFF;

		.order-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #F3F3F3;

			.order-time {
				color: #818496;
				font-size: 24rpx;
			}

			.order-state {
				font-size: 28rpx;
			}
		}

		.order-body {
			padding: 24rpx 0;

			.order-name {
				font-size: 32rpx;
				color: #21252E;
				font-weight: 500;
			}

			.order-body-item {
				padding: 16rpx 0 0 0;
				font-size: 24rpx;
				color: #505363;

				&:last-child {
					padding-bottom: 24rpx;
				}
			}
		}

		.order-project-info {
			border-bottom: 1px solid #F3F3F3;
			border-top: 1px solid #F3F3F3;
			padding: 16rpx 0;
			margin-top: 8rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.order-project-left {
				width: calc(100% - 150rpx);

				.left-title {
					color: #505363;
					font-size: 28rpx;
					font-weight: 500;
				}

				.left-time {
					color: #818496;
					font-size: 24rpx;
					margin-top: 5rpx;
				}
			}

			.order-project-right {
				width: 150rpx;
				text-align: right;
				color: #F37C2B;
				font-size: 32rpx;
				font-weight: 500;
			}
		}

		.order-btn {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btn {
				font-size: 28rpx;
				line-height: 1;
				color: #505363;
				border: 1px solid #ECEEF1;
				box-sizing: border-box;
				padding: 12rpx 24rpx;
				border-radius: 24px;
				margin-left: 20rpx;
			}
		}
	}

	.order-personal {
		margin: 24rpx 28rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background-color: #FFFFFF;

		.order-time {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #F3F3F3;

			.order-left {
				color: #818496;
				font-size: 24rpx;
			}

			.order-right {
				font-size: 28rpx;
			}
		}

		.order-body {
			display: flex;
			justify-content: center;
			padding: 10rpx 0;

			//height: 136rpx;
			.order-body-left {
				height: 100%;
				width: calc(100% - 180rpx);
				margin-bottom: 10rpx;

				.order-name {
					font-weight: 500;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.order-group {
					font-size: 28rpx;
					margin: 10rpx 0;
					color: #505363;
				}

				.order-card {
					font-size: 28rpx;
					color: #505363;
				}
			}

			.order-body-right {
				text-align: right;
				width: 180rpx;
				height: 100%;
				border-left: 1rpx dashed #f9f9f9;

				.order-money {
					color: #21252E;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				.order-number {
					font-size: 24rpx;
					color: #818496;
				}
			}
		}

		.service-list {
			padding: 10rpx;

			.service-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: rgba(243, 124, 43, 0.06);

				.service-body {
					width: calc(100% - 100rpx);

					.service-title {
						font-size: 28rpx;
						color: #505363;
					}

					.service-content {
						margin-top: 5rpx;
						font-size: 24rpx;
						color: #818496;
					}
				}

				.service-btn {
					width: 100rpx;

					.btn {
						margin: auto 0;
						padding: 14rpx 20rpx;
						border-radius: 10rpx;
						background-color: #F36E13;
						color: #ffffff;
						font-size: 28rpx;
						text-align: center;
					}
				}
			}
		}

		.order-btn {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			border-top: 1rpx solid #F3F3F3;
			padding-top: 20rpx;

			.btn {
				font-size: 28rpx;
				color: #505363;
				border: 1px solid #ECEEF1;
				line-height: 1;
				box-sizing: border-box;
				padding: 16rpx 24rpx;
				border-radius: 24px;
				margin-left: 20rpx;

				&.success {
					color: #ffffff;
					background-color: #92C75B;
				}

				&.danger {
					color: #ffffff;
					background-color: #f54747;
				}
			}
		}
	}
</style>